<template>
  <div class="retrievePassword">
    <van-nav-bar>
      <template #left>
        <div class="left-box">
          <div class="logo">
            <img class="auto-img" src="../assets/home_active.png" alt="" />
          </div>
          <div class="logo-title">Luckin Coffee</div>
        </div>
      </template>

      <template #right>
        <div class="right-box" @click="goHome">先逛一逛</div>
      </template>
    </van-nav-bar>
    <div class="retrievePassword-box">
      <div class="retrievePassword-text">
        <div class="welcome">找回密码！</div>
        <div class="welcome-text">Find you pasword</div>
      </div>

      <div class="form-box">
        <van-form>
          <van-field
            v-model="email"
            :type="isChange ? 'number' : 'email'"
            :label="isChange ? '手机号' : '邮箱'"
            :placeholder="
              isChange ? '请输入注册时的手机号' : '请输入接受的邮箱账号'
            "
            autocomplete="off"
          />
          <van-field
            v-model="emailValid"
            center
            clearable
            :type="isChange ? 'password' : 'emailValid'"
            :label="isChange ? '密码' : '验证码'"
            :placeholder="isChange ? '请输入新的密码' : '请输入验证码'"
          >
            <template #button>
              <van-button
                size="small"
                type="primary"
                v-if="!isChange"
                @click="EmailValidCode"
                >发送验证码</van-button
              >
            </template>
          </van-field>
          <div class="logining">
            <div class="logining-text" @click="gologin">已有账号，立即登录</div>
          </div>
          <div class="retrievePassword-btn">
            <van-button
              v-if="!isChange"
              round
              block
              color="#0C34BA"
              native-type="submit"
              @click="CheckValidCode"
              >下一步</van-button
            >
          </div>
          <div class="retrievePassword-btn">
            <van-button
              v-if="isChange"
              round
              block
              color="#0C34BA"
              native-type="submit"
              @click="retrievePassword"
              >提交</van-button
            >
          </div>

          <div class="retrievePassword-btn">
            <van-button
              round
              block
              color="#000"
              plain
              native-type="submit"
              v-if="isChange"
              @click="goback"
              >返回</van-button
            >
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RetrievePassword",
  created() {},
  data() {
    return {
      // 邮箱
      email: "",

      // 按钮文字
      //验证码
      emailValid: "",
      // 初始化动态值
      isChange: false,

      // emailReg: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
    };
  },
  methods: {
    goback() {
      this.$router.back();
    },
    gologin() {
      this.$router.push({ name: "Login" });
    },
    goHome() {
      this.$router.push({ name: "Home" });
    },
    send() {
      this.axios({});
    },
    // 发送验证码
    EmailValidCode() {
      let data = {
        email: this.email,
      };
      this.axios({
        method: "post",
        url: "/emailValidCode",
        data,
      })
        .then((res) => {
          this.$toast(res.data.msg);
        })
        .catch((err) => {});
    },
    // 检查验证码
    CheckValidCode() {
      let data = {
        validCode: this.emailValid,
      };
      this.axios({
        method: "post",
        url: "/checkValidCode",
        data,
      })
        .then((res) => {
          this.$toast(res.data.msg);

          if ((res.data.code = "K001" && this.email != "")) {
            this.isChange = true;
            this.email = "";
            this.emailValid = "";
          }
        })
        .catch((err) => {});
    },
    // 找回密码
    retrievePassword() {
      let data = {
        phone: this.email,
        password: this.emailValid,
      };
      this.axios({
        method: "post",
        url: "/retrievePassword",
        data,
      })
        .then((res) => {
          this.$toast(res.data.msg);
          if(res.data.code=="L001"){
            this.$router.push({name:'login'})
          }
          console.log('res==>',res);
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-field {
  margin-top: 10px;
}

/deep/.van-button--small {
  color: rgba(255, 255, 255, 0.9);
  background-color: #0c34ba;
}
.logining {
  display: flex;
  margin-top: 20px;
}

.logining-text {
  margin-left: auto;
  font-size: 14px;
  color: #666;
}
.retrievePassword {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  .retrievePassword {
    display: flex;
    margin-top: 20px;
  }

  .retrievePassword-text {
    margin-left: auto;
    font-size: 14px;
    color: #666;
  }

  .retrievePassword-btn {
    margin-top: 50px;
  }

  .form-box {
    margin-top: 50px;
  }

  .welcome {
    font-size: 23px;
    color: #555;
    font-weight: bold;
  }

  .welcome-text {
    color: #666;
    margin-top: 20px;
    font-size: 16px;
  }

  .retrievePassword-box {
    padding: 20px;
  }

  .retrievePassword-text {
    margin-top: 50px;
  }

  .right-box {
    font-weight: bold;
    font-size: 14px;
    color: #0c34ba;
  }

  .left-box {
    display: flex;
    align-items: center;
  }

  .logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .logo-title {
    font-weight: bold;
    color: #444;
    font-size: 14px;
  }
}
</style>